<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>贪吃蛇</title>
<style>
*{
  margin:0px;
  padding:0px;
}
</style>
<script type="text/javascript">
   
var map;
var food;
var snake;
//创建地图
   function Map(){
	   this.width=1300;
	   this.height=500;
	   this.bgColor='#aaa';
	   this._map=null;
	   this.display=function(){
		   //创建一个div
		   this._map=document.createElement('div');
		   this._map.style.width=this.width+'px';//div的宽
		   this._map.style.height=this.height+'px';//div的高
		   this._map.style.backgroundColor=this.bgColor;//背景色
		   this._map.style.position="absolute";
		   document.getElementsByTagName('body')[0].appendChild(this._map);//将创建出的div追加至body内		   
	   };
   }
   //创建食物
   function Food(){
	   this.width=20;
	   this.height=20;
	   this.color='green';
	   this.x=0;//食物的位置--横坐标
	   this.y=0;//食物的位置--纵坐标
	   this._food=null;
	   this.display=function(){
		   if(this._food==null){
		   //创建食物元素
			  this._food=document.createElement('div');
			  this._food.style.width=this.width+'px';
			  this._food.style.height=this.height+'px';
			  this._food.style.backgroundColor=this.color;
			  this._food.style.position="absolute";
			  //将食物放到地图上
			  map._map.appendChild(this._food);
		   }
		  //食物出现的位置		  
		  this.x=Math.ceil(Math.random()*64);
		  this.y=Math.ceil(Math.random()*24);
		  this._food.style.left=this.x*this.width+'px';
		  this._food.style.top=this.y*this.height+'px';
		  
	   };
   }
   //创建蛇
   function Snake(){
	   var count=0;//蛇节数
	    var count_eat=0;//已吃食物的个数
	   //定义每个蛇节的宽和高
	   this.width= 20;
	   this.height=20;
	   //蛇行走的方向
	   this.direct="right";
	   this.body=[[3,3,'blue',null],[2,3,'yellow',null],[1,3,'yellow',null],[0,3,'yellow',null]];
	   this.display=function(){
		   
		   for(var i=0;i<this.body.length;i++){
			   if(this.body[i][3]==null){
				   this.body[i][3]=document.createElement('div');
				   this.body[i][3].style.width=this.width+'px';
				   this.body[i][3].style.height=this.height+'px';
				   this.body[i][3].style.position="absolute";
					 //显示文本框的内容
					  count++;
					  count_eat++;
					  var ipt1=document.getElementById('ipt1');
					  ipt1.value="已吃食物为："+(count_eat-4)+"个";
					  var ipt2=document.getElementById('ipt2');
					  ipt2.value="蛇的节数为："+(count-1)+"节";
				   this.body[i][3].style.backgroundColor=this.body[i][2];
				   //将蛇放到地图上
				   map._map.appendChild(this.body[i][3]);
			   }
			   this.body[i][3].style.left=this.body[i][0]*this.width+'px';
			   this.body[i][3].style.top=this.body[i][1]*this.height+'px';
		   }
	   };
	   //让蛇动起来
	   this.move=function(){
		   for(var i=this.body.length-1;i>0;i--){
			   this.body[i][0]=this.body[i-1][0];
			   this.body[i][1]=this.body[i-1][1];
		   }
		   switch(this.direct){
		   case 'right':
			   this.body[0][0]+=1;
			   break;
		   case 'down':
			   this.body[0][1]+=1;
			   break;
		   case 'left':
			   this.body[0][0]-=1;
			   break;
		   case 'top':
			   this.body[0][1]-=1;
			   break;
		   }

		   
		   //蛇吃食物
		   if(this.body[0][0]==food.x && this.body[0][1]==food.y){
			  //吃到食物就再次出现一个位置
			   food.display();
			  //为蛇添加一个蛇节
			  var length=this.body.length;
			  var x=this.body[length-1][0];
			  var y=this.body[length-1][1];
			  this.body.push([x,y,'yellow',null]);
			  
		   }
		   //判断是否撞墙
		   if(this.body[0][0]==65 || this.body[0][0]==-1 || this.body[0][1]==25 || this.body[0][1]==-1){
			   alert('撞墙死啦');
			   clearTimeout(timer);
			   //判断如果撞墙开始按钮的点击事件就失效
			   start=document.getElementById('start');
			   start.onclick=null;
			   return;
		   }
		   //判断自己吃到自己
		   for(var i=1;i<this.body.length;i++){
			   if(this.body[0][0]==this.body[i][0] && this.body[0][1]==this.body[i][1]){
				   alert("吃到自己啦");
				   clearTimeout(timer);
				 //判断如果吃到自己开始按钮的点击事件就失效
				   start=document.getElementById('start');
				   start.onclick=null;
				   return;
			   }
		   }
		   this.display();
	   };
	   //设置蛇行走的方向
	   this.setDirect=function(value){
		   switch(value){
		      case 37:
		    	  this.direct='left';
		    	  break;
		      case 38:
		    	  this.direct='top';
		    	  break;
		      case 39:
		    	  this.direct='right';
		    	  break;
		      case 40:
		    	  this.direct='down';
		    	  break;
		   }
	   };
   }
   //等级的选择
   var time=1000; 
   sel=function(s){
	   if(s.value==1){
		   time=1000;
	   }else if(s.value==2){
		   time=500;
	   }else if(s.value==3){
		   time=300;
	   }
   };
   window.onload=function(){
	   map=new Map();//显示地图
	   map.display();
	   
	   food=new Food();//显示食物
	   food.display();
	   
	   snake=new Snake();//显示蛇
	   snake.display();
	   //snake.move();
	   
	   timer=setInterval("snake.move()",time);
	   //为body绑定一个键盘事件
	   document.getElementsByTagName('body')[0].onkeydown=function(event){
		   snake.setDirect(event.keyCode);
	   };
	   
   };
   //开始
   function start(){
	   var start=document.getElementById('start');
	   timer=setInterval("snake.move()",time);	  
   }
   //暂停
   function stop(){
	   var stop=document.getElementById('stop');
	   clearTimeout(timer); 
   }
   //重新开始
   function restart(){
	   var restart=document.getElementById('restart');
	   location.reload(true);
   }
 //重新开始
</script>
</head>
<body>

<input type="button" value="开始" id="start" onclick="start()"> 
<input type="button" value="暂停" id="stop" onclick="stop()">
<input type="button" value="重新开始" id="restart" onclick="restart()">
请选择等级：<select id="select" onchange="sel(this)">
             <option >【请选择等级】</option>
             <option value="1">简单</option>
             <option value="2">一般</option>
             <option value="3">难</option>
         </select>&nbsp;&nbsp;&nbsp;
<input type="text" id="ipt1" value="已吃食物为：0个" readonly>&nbsp;&nbsp;&nbsp;
<input type="text" id="ipt2" value="蛇的节数为：3节" readonly>

</body>
</html>